<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位问题</title>
		<style>
			/*相对定位：相对于父级元素进行定位，没有父级按照body进行定位，不脱离文档流
			  绝对定位：按照页面左侧顶角进行定位，在父级元素中，首先按照父级定位，脱离文档流
			*/
			div{
				width: 300px;
				height: 300px;
				background: #f00;
				border-radius: 50%;
				position: absolute;
				top: 0;
				left: 0;
			}
			/*需求:5个圆，每个圆颜色不同
			  类选择器使用问题：常用模式：3个别名
			    html语法：class="别名1 别名2 别名3..."
			    css语法: 别名.{}
			*/
		   .d1{
			   background:#ffaa00 ;
		   }
		   .d2{
			   background:#0055ff ;
		   }
		   .d3{
			   background:#00aa00 ;
		   }
		   .d4{
			   background:#00007f ;
		   }
		   .d5{
			   background:#aaff00 ;
		   }
		</style>
	</head>
	<body>
		<!--创建4个div  一个p-->
		<div class="d "></div>
		<div class="d d2"></div>
		<div class="d d3"></div>
		<p class="d d4"></p>
		<div class="d d5"></div>
	</body>
</html>